import { useState , useCallback, useEffect} from 'react'

export function useMobile() {

  const [ isMobile , setIsmobile ] = useState<boolean>(false)
  
  const judger = useCallback(() => {
    
    const agent = navigator.userAgent

    const isMobile1 = agent.match(/Mobi/i) || agent.match(/Android/i) || agent.match(/iPhone/i);

    const isMobile2 = window.innerWidth < 768;

    const isMobile3 = typeof window.orientation !== 'undefined'

    setIsmobile(Boolean(isMobile1) || isMobile2 || isMobile3 )
  }, [])

  
  useEffect(() => {

    window.addEventListener("resize", judger)
    
    judger()

    return () => {
      window.addEventListener("resize" , judger)
    }
  },[])


  return {
    isMobile
  }
}